* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow: hidden;
}

#canvasBox {
  background-attachment: fixed;
  height: 100vh;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50%;
  background-image: url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
}

.startBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc((20 / 4.14) * 1vw);
  z-index: 9;
  color: #fff;
  font-weight: bolder;
  background-color: transparent;
}

.killBox {
  display: none;
  position: absolute;
  top: calc((15 / 4.14) * 1vw);
  left: calc((15 / 4.14) * 1vw);
  font-size: calc((15 / 4.14) * 1vw);
  z-index: 9;
  color: #fff;
  font-weight: bolder;
  background-color: transparent;
}
.killBox span {
  color: yellow;
}

.escapeBox {
  display: none;
  position: absolute;
  right: calc((15 / 4.14) * 1vw);
  top: calc((15 / 4.14) * 1vw);
  font-size: calc((15 / 4.14) * 1vw);
  z-index: 9;
  color: #fff;
  font-weight: bolder;
  background-color: transparent;
}
.escapeBox span {
  color: red;
}

.overBox {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: 100;
  background-color: #fff;
  overflow: hidden;
  border-radius: calc((4 / 4.14) * 1vw);
}
.overBox .title {
  padding: calc((15 / 4.14) * 1vw);
  font-size: calc((16 / 4.14) * 1vw);
  color: rgb(167, 167, 167);
  font-weight: 600;
  text-align: center;
  border-bottom: calc((1 / 4.14) * 1vw) solid #f6f6f6;
}

.overBox .again {
  padding: calc((15 / 4.14) * 1vw);
  font-size: calc((15 / 4.14) * 1vw);
  color: rgb(241, 78, 78);
  font-weight: 600;
  text-align: center;
  border-top: calc((1 / 4.14) * 1vw) solid #f6f6f6;
}

.overBox .content {
  padding: calc((15 / 4.14) * 1vw);
  font-size: calc((18 / 4.14) * 1vw);
  color: #333;
  font-weight: 600;
  text-align: center;
  border-top: calc((1 / 4.14) * 1vw) solid #f6f6f6;
  min-height: calc((100 / 4.14) * 1vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.overBox .gameOver {
  color: red;
}

.cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0);
  z-index: 99;
}

#canvas {
  background-color: rgba(0, 0, 0, 0.1);
}

.btmBox {
  position: absolute;
  left: 50%;
  bottom: calc((15 / 4.14) * 1vw);
  transform: translateX(-50%);
  font-size: calc((10 / 4.14) * 1vw);
  z-index: 9;
  color: rgb(196, 196, 196);
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
